<template>
  <div class="layout-container">
    <DrawerSettings/>
    <SliderNavs></SliderNavs>
    <div class="right-container" :style="{marginLeft:meunStore.isCollapse?'60px':'210px'}">
      <TopNavs/>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>

import SliderNavs from "@/components/SilderNavs.vue";
import TopNavs from "@/components/TopNavs.vue";
import {useMenuStore} from "@/stores/menuStore.js"
import {useLoginStore} from "@/stores/loginStor.js";
import {onMounted} from "vue";
import api from "@/api/index.js";
import {useRouter} from "vue-router";
import mangeRouter from "@/router/dynamicRouter.js";
import DrawerSettings from "@/components/Drawer.vue";

const meunStore = useMenuStore()
const loginStore = useLoginStore()
const router = useRouter()
onMounted(() => {
  api.getRouter({
    user: loginStore.permission
  }).then(res => {
    if (res.status === 200) {
      meunStore.menus = res.menuData.menus
      if (loginStore.permission === 'admin') {
        router.addRoute('layout', mangeRouter)
      }
    }
  })
})
</script>

<style lang="scss" scoped>
.right-container {
  margin-left: 210px;
  transition: 0.3s ease-in;
}

.content {
  padding: 20px;
}
</style>